<template>
	<view class="content">
		<view class="login_from">
			<view class="title">账号</view>
			<view style="display: flex; width: 100%;" class="input">
				<input placeholder="账号" placeholder-style="font-size:26rpx;color:#ACACAC;" type="text" name="input" v-model="name" />
			</view>
			<view class="title">当前密码</view>
			<view style="display: flex; width: 100%;" class="input">
				<input placeholder="请输入当前密码" placeholder-style="font-size:26rpx;color:#ACACAC;" type="password" name="input" v-model="password" />
			</view>
		<view>
			<view class="title">新的密码</view>
			<view class="input">
				<input placeholder="请输入新的密码" placeholder-style="font-size:26rpx;color:#ACACAC;" type="password" name="input" v-model="newPassword" />
			</view>
		</view>
		<view>
			<view class="title">确认密码</view>
			<view class="input">
				<input placeholder="请确认新的密码" placeholder-style="font-size:26rpx;color:#ACACAC;" type="password" name="input" v-model="confirmPassword" />
			</view>
		</view>
		
		<view class="login_from_dl">
			<button @click="xiugai">确认修改</button>
		</view>
		
		<view class="forgotBtn">
			<navigator url="/pages/forget/forget">忘记密码</navigator>
		</view>
		<uni-popup ref="alertDialog" type="dialog">
			<uni-popup-dialog :type="msgType" cancelText="关闭" @confirm="backTologin" confirmText="确认" title="提示信息" :content="messageText"></uni-popup-dialog>
		</uni-popup>
		</view>
	</view>
</template>


<script>
	export default {
		data() {
			return {
				name:'',
				password:'',
				newPassword:'',
				confirmPassword:'',
				msgType:"",
				messageText:""
			}
		},
		methods: {
			backTologin(){
				if(this.messageText == "修改成功"){
					uni.navigateTo({
						url:"/pages/login/login"
					})
				}
			},
			showError(msg){
				this.msgType = "error";
				this.messageText = msg;
				this.$refs.alertDialog.open()
			},
			showSuccess(msg){
				this.msgType = "success";
				this.messageText = msg;
				this.$refs.alertDialog.open()
			},
			xiugai(){
				if(this.newPassword!=this.confirmPassword){
					this.showError("密码不一致")
				}
				else{
				uni.request({
					url:"http://localhost:8080/user/reset",
					method:'POST',
					data:{
						name: this.$encryptByPublicKey(this.name),
						password: this.$encryptByPublicKey(this.password),
						newPassword: this.$encryptByPublicKey(this.newPassword)
					},
					header:{
						'Content-Type':'application/x-www-form-urlencoded' //请求头信息
					},
					success: (res) => {
						if(res.data == "修改成功"){
							this.showSuccess("修改成功");
						}
						else{
							this.showError("账号或密码错误");
						}
					},
					fail:()=>{
						console.log("调用失败")
					}
				})}
			}
			
		}
	}
</script>


<style scoped>
	page{
	  height:100%
	}
	#contianer {
		padding-top: 1rpx;
		position: relative;
		height: 100%;
		/* 本页面背景颜色 */
		background-color: #F5F5F5;
	}
	.title {
		color: #696969;
		margin: 15rpx 20rpx;
	}
	.input {
		padding: 20rpx 20rpx;
		background-color: #fff;
	}
	.button {
		width: 93%;
		color: #fff;
		background-color: #00BFFF;
	}
	.forgotBtn{
			margin-top: 2vh;
			display: flex;
			justify-content: center;
	 
			::v-deep text {
				margin: 0 2vw;
			}
	}
	page{ background: #fff; }
		.login_from{
			width: 100%; 
			height: auto; 
			box-sizing: border-box; 
			padding: 20upx 8%; 
		}
		.login_from_name{ width: 20%; }
		.avatorWrapper{
			height: 30vh;
			width: 100vw;
			display: flex;
			justify-content: center;
			align-items: flex-end;
		}
		.avator{
			width: 200upx;
			height: 200upx;
			overflow: hidden;
		}
		.avator .img{
			width: 100%
		}
		.form{
			padding: 0 100upx;
			margin-top: 80px;
		}
	/* 	.inputWrapper{
			width: 100%;
			height: 80upx;
			background: white;
			border-radius: 400px;
			box-sizing: border-box;
			padding: 0 20px;
			margin-top: 25px;
		}
		.inputWrapper .input{
			width: 100%;
			height: 100%;
			text-align: center;
			font-size: 15px;
		} */
		.loginBtn{
			width: 100%;
			height: 80upx;
			background: #77B307;
			border-radius: 50upx;
			margin-top: 50px;
			display: flex;
			justify-content: center;
			align-items: center;
			
		}
		.loginBtn .btnValue{
			color: white;
		}
		.forgotBtn{
				margin-top: 2vh;
				display: flex;
				justify-content: center;
	 
				::v-deep text {
					margin: 0 2vw;
				}
		}
		.login_from_input{ 
			width: 100%; 
			height:auto; 
			display: flex; 
			flex-direction: row; 
			justify-content: space-between; 
			align-items: center; 
			border-bottom: 1px #eee solid; 
			padding: 40upx 0px; 
			margin: 0px auto;  
		}
		.login_from_fun{ 
			width: 80%; 
			display: flex; 
			flex-direction: row; 
			justify-content: flex-end; 
			align-items: center;  
		}
		.login_from_fun input{ 
			width: 100%; 
			text-align: left; 
			font-size: 14px;  
		}
		.login_from_dl{
			width: 100%; 
			height: 50px; 
			line-height: 50px; 
			margin-top: 150upx;   
		}
		.login_from_dl button{ 
			width: 100%; 
			height: 50px; 
			line-height: 50px; 
			background: #77B307; 
			color: #fff; 
			border-radius: 0px; 
		}
</style>

